@extends('layouts.admin.base')
@section('title', '数据定义管理')

@section('content')
    <div class="content">
        <!-- 内容主体区域 -->
        <div class="show-area">
            <div class="layui-row">
                <div class="layui-card">
                    <div class="layui-card-header">数据字典管理</div>
                    <div class="layui-card-body">
                        <div class="layui-row" style="border-bottom: 1px #e9e9e9 solid;padding: 15px 0;" btnPermission="600301">
                            <form id="qryForm" class="layui-form" action="">
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">字典库名称:</label>
                                        <div class="layui-input-inline" >
                                            <select name="dicname" lay-filter="diclist"  data-role="diclist" ></select>
                                        </div>
                                    </div>
                                    <div class="layui-inline" style="padding-left: 35px;">
                                        <div class="layui-input-inline" style="width: 250px;">
                                            <button id="qryBtn" type="button" lay-filter="formQry" lay-submit class="pear-btn pear-btn-lg pear-btn-primary"><i class="layui-icon layui-icon-search"></i> 查询</button>
                                            <button type="reset" class="pear-btn pear-btn-lg" lay-submit="" lay-filter="reset"><i class="layui-icon layui-icon-refresh"></i>重置</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="layui-row">
                            <div class="layui-table">
                                <table id="datalist" lay-filter="datalist" >
                                </table>
                                <script type="text/html" id="opTpl">
                                    <a  class="layui-table-link" style="cursor:pointer" lay-event="edit" btnPermission="600303">编辑</a>&nbsp;
                                    <a  class="layui-table-link" style="cursor:pointer" lay-event="delete" btnPermission="600304">删除</a>&nbsp;
                                </script>
                                <script type="text/html" id="toolbarTpl">
                                    <div class="layui-btn-container right-align">
                                        <button type="button" class="layui-btn layui-btn-normal" style="padding:0px 8px;" onclick="doAdd()" btnPermission="600302"><i class="layui-icon layui-icon-addition"></i></i>新增字段</button>
                                    </div>
                                </script>
                            </div>
                            <div id="bbar" style="text-align:right;padding-right:25px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--新增条目弹窗-->
    <div id="addDialoge" class="dialogue" style="display: none;padding: 20px">
        <form class="layui-form" action="" id="addForm" lay-filter="addForm">
            <div class="layui-form-item">
                <label class="layui-form-label"><i class="redstar">*</i>条目编码</label>
                <div class="layui-input-inline">
                    <input type="text" name="itemcode" required lay-verify="required" placeholder="请输入编码" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><i class="redstar">*</i>条目名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="itemname" required lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><i class="redstar">*</i>排序</label>
                <div class="layui-input-inline" style="margin-top: 15px;">
                    <div class="addslide demo-slider" name="sortnum"></div>
                </div>
            </div>
            <div style="text-align: center; clear: both;">
                <button class="layui-btn  layui-btn-normal" lay-submit lay-filter="addSubmit" style="padding: 0 50px; margin-top: 20px;">提交</button>
            </div>
        </form>
    </div>

    <!--编辑条目弹窗-->
    <div id="editDialoge" class="dialogue" style="display: none;padding: 20px">
        <form class="layui-form" action="" id="editForm" lay-filter="editForm">
            <div class="layui-form-item">
                <label class="layui-form-label"><i class="redstar">*</i>条目编码</label>
                <div class="layui-input-inline">
                    <input type="text" name="itemcode" required lay-verify="required" placeholder="请输入编码" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><i class="redstar">*</i>条目名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="itemname" required lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><i class="redstar">*</i>排序</label>
                <div class="layui-input-inline" style="margin-top: 15px;">
                    <div class="editslide demo-slider" name="sortnum"></div>
                </div>
            </div>
            <div style="text-align: center; clear: both;">
                <button class="layui-btn  layui-btn-normal" lay-submit lay-filter="editSubmit" style="padding: 0 50px; margin-top: 20px;">提交</button>
            </div>
        </form>
    </div>
@endsection

@section('script')
    <style>
        .layui-form-label {
            width: 120px;
            font-weight:bold;
        }
        #editWin .layui-form-select dl{
            top: auto;
            bottom: 36px;
        }
    </style>
    <script>
        var totalNUm = 0;
        var per_page = 10;
        var currPage = 1;
        var table;
        var form;
        var laypage;
        var layer;
        var slider;
        var filters = {};
        var addLayer;
        var editLayer;
        var diccode = '';
        var id = '';
        var diclist;
        var sortnum;

        $(function(){
            layui.use(['table', 'form', 'element', 'laypage','slider'], function() {
                table = layui.table;
                element = layui.element;
                form = layui.form;
                laypage = layui.laypage;
                layer = layui.layer;
                slider = layui.slider;

                renderSelect();
                btnEventHandle();

                tableToolsHandle();

            });
        });

        function renderSelect(){
            getAllDic(null,function (res) {
                if(res.code === 1){
                    diclist = res.data;
                    if(diclist.length>0){
                        diccode = diclist[0].diccode;
                        for(var i=0; i<diclist.length;i++) {
                            $('[data-role="diclist"]').append('<option value="'+diclist[i].diccode+'">'+diclist[i].dicname+'</option>');
                        }
                    }
                    form.render('select');

                    getList(currPage,per_page);
                }
            })
        }

        function btnEventHandle(){
            form.on('select(diclist)',function (data) {
                diccode = data.value;
            })

            // 搜索
            form.on('submit(formQry)', function(data) {
                filters = Object.assign({}, data.field);
                currPage = 1;
                getList(currPage,per_page);
                return false;
            });
            // 重置
//            form.on('submit(reset)', function(data) {
//                filters = {};
//                $('#qryForm')[0].reset();
//                diccode = diclist[0].diccode;
//                currPage = 1;
//                getList(currPage, per_page);
//            });

            // 新增提交
            form.on('submit(addSubmit)', function(datas) {
                var data = datas.field;
                var para = {
                    "diccode": diccode,
                    "itemcode": data.itemcode,
                    "itemname": data.itemname,
                    "sortnum": sortnum
                }
                addDicItem(para, function(res) {
                    if(res.code === 1) {
                        layer.close(addLayer);
                        $('#addForm')[0].reset()
                        layer.msg(res.msg, {
                            time: 2000,
                            icon: 6
                        });
                        currPage = 1;
                        getList(currPage, per_page);
                    } else {
                        layer.msg(res.msg, {
                            time: 2000,
                            icon: 5
                        });
                    }
                })
                return false;
            });

            // 编辑提交
            form.on('submit(editSubmit)', function(datas) {
                var flag = true;
                var data = datas.field;
                var para = {
                    "id": id,
                    "diccode": diccode,
                    "itemcode": data.itemcode,
                    "itemname": data.itemname,
                    "sortnum": sortnum
                }
                editDicItem(para, function(res) {
                    if(res.code === 1) {
                        layer.close(editLayer);
                        $('#editForm')[0].reset();
                        layer.msg(res.msg, {
                            time: 2000,
                            icon: 6
                        });
                        currPage = 1;
                        getList(currPage, per_page);
                    } else {
                        layer.msg(res.msg, {
                            time: 2000,
                            icon: 5
                        });
                    }
                });

                return false;
            });
        }

        function tableToolsHandle(){
            table.on('tool(datalist)', function(obj) {
                var data = obj.data;
                id = data.id;
                if(obj.event === 'delete') { //删除
                    layer.confirm('请确认是否删除？', function(index) {
                        var para = {
                            "id": id
                        }
                        delDicItem(para, function(res) {
                            if(res.code == 1) {
                                layer.msg(res.msg, {
                                    time: 2000,
                                    icon: 6
                                });
                                currPage = 1;
                                getList(currPage, per_page);
                            } else {
                                layer.msg(res.msg, {
                                    time: 2000,
                                    icon: 5
                                });
                            }
                        });
                        layer.close(index);
                    });
                } else if(obj.event === 'edit') { //编辑
                    layer.ready(function() {
                        var index = layer.load(2);
                        editLayer = layer.open({
                            type: 1,
                            title: "编辑",
                            content: $('#editDialoge'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
                            area: ['485px', '400px'],
                            cancel: function() {
                                //右上角关闭回调
                                $('#editForm')[0].reset()
                                //return false 开启该代码可禁止点击该按钮关闭
                            }
                        });
                        layer.close(index);
                    });
                    //获取编辑的值
                    form.val('editForm', {
                        "itemcode": data.itemcode,
                        "itemname": data.itemname,
                        "sortnum": data.sortnum
                    });
                    var renderSlider = slider.render({
                        elem: '.editslide',
                        input: true,
                        max: 100,
                        change: function(value) {
                            sortnum = value;
                        }
                    });
                    renderSlider.setValue(data.sortnum);
                } else if(obj.event === 'item') {
                    var url = skipurl('/systems/dics/items');
                    layer.ready(function() {
                        var index = layer.load(2);
                        layer.open({
                            type: 2,
                            title: '数据定义项管理',
                            content: url,
                            area: ['800px', '600px'],
                        });
                        layer.close(index);
                    });
                }
            });
        }

        function getList(page, limit) {
            var para = {
                "diccode": diccode,
                "page": page,
                "filters": filters,
                "limit": limit
            };

            getDicItemList(para, function(res) {
                //console.log(res);
                if (res.code == 1) {
                    if(totalNUm != res.total) {
                        totalNUm = res.total;
                        per_page = res.limit;
                        renderPageBar(page,per_page);
                    }
                    table.render({
                        elem: '#datalist',
                        toolbar: '#toolbarTpl',
                        defaultToolbar: [],
                        limit: res.limit,
                        data: res.data,
                        page: false,
                        loading: true,
                        even:true,
                        skin: 'row',
                        cols: [
                            [{
                                field: 'id',
                                title: '序号',
                                templet: function(data){
                                    var curPage = $(".layui-laypage-skip .layui-input").val();
                                    return (curPage-1)*10 + data.LAY_INDEX;
                                },
                                width: '10%',
                                align: 'center'
                            }, {
                                field: 'itemname',
                                title: '字段名称',
                                width: '60%',
                                align: 'center'
                            }, {
                                title: '操作',
                                toolbar: '#opTpl',
                                align: 'center'
                            }]
                        ],
                        done: function(res, curr, count) {
                            setBtnPermission();
                        }
                    });

                } else {
                    layer.msg(res.msg, {
                        time: 2000,
                        icon: 5
                    });
                }
            })

        }

        // 渲染页面
        function renderPageBar(page,limit) {
            laypage.render({
                elem: 'bbar',
                count: totalNUm, //数据总数，从服务端得到
                curr: page,
                limit:limit,
                first: '第一页',
                last: '最后一页',
                layout: ['limit','count', 'prev', 'page', 'next', 'skip'],
                jump: function(obj, first) {
                    //console.log(obj);
                    //首次不执行
                    if (!first) {
                        layer.closeAll();
                        currPage = obj.curr;
                        getList(obj.curr, obj.limit);
                    }
                }
            });
        }

        function doAdd(){
            layer.ready(function() {
                var index = layer.load(2);
                addLayer = layer.open({
                    type: 1,
                    title: '新增',
                    content: $('#addDialoge'),
                    area: ['485px', '400px'],
                    cancel: function() {
                        //右上角关闭回调
                        $('#addForm')[0].reset()
                        //return false 开启该代码可禁止点击该按钮关闭
                    }
                });
                layer.close(index);
            });
            form.val('addForm', {
                "itemcode": "",
                "itemname": "",
                "sortnum": 50
            });
            //在这里要重新渲染不然和编辑的冲突拖拽不了
            var renderSlider = slider.render({
                elem: '.addslide',
                input: true //输入框
                ,
                max: 100 //最大值
                ,
                change: function(value) {
                    sortnum = value;
                }
            });
            renderSlider.setValue(50);
        }
    </script>

@endsection
